<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      style="padding: 24px; background-color: #f7f8fa;"
    >
      <div
        class="ant-pro-checkcard-group"
      >
        <div
          class="ant-pro-checkcard ant-pro-checkcard-bordered"
        >
          <div
            class="ant-pro-checkcard-content"
          >
            <div
              class="ant-pro-checkcard-avatar"
            >
              <span
                class="ant-avatar ant-avatar-square ant-avatar-image"
                style="width: 32px; height: 32px; font-size: 18px;"
              >
                <img
                  src="https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg"
                />
              </span>
            </div>
            <div
              class="ant-pro-checkcard-detail"
            >
              <div
                class="ant-pro-checkcard-header"
              >
                <div
                  class="ant-pro-checkcard-header-left"
                >
                  <div
                    class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                  >
                    图像分类
                  </div>
                </div>
              </div>
              <div
                class="ant-pro-checkcard-description"
              >
                这是一段关于该算法的说明
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-checkcard ant-pro-checkcard-bordered"
        >
          <div
            class="ant-pro-checkcard-content"
          >
            <div
              class="ant-pro-checkcard-avatar"
            >
              <span
                class="ant-avatar ant-avatar-square ant-avatar-image"
                style="width: 32px; height: 32px; font-size: 18px;"
              >
                <img
                  src="https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg"
                />
              </span>
            </div>
            <div
              class="ant-pro-checkcard-detail"
            >
              <div
                class="ant-pro-checkcard-header"
              >
                <div
                  class="ant-pro-checkcard-header-left"
                >
                  <div
                    class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                  >
                    物体检测
                  </div>
                </div>
              </div>
              <div
                class="ant-pro-checkcard-description"
              >
                这是一段关于该算法的说明
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-checkcard ant-pro-checkcard-bordered"
        >
          <div
            class="ant-pro-checkcard-content"
          >
            <div
              class="ant-pro-checkcard-avatar"
            >
              <span
                class="ant-avatar ant-avatar-square ant-avatar-image"
                style="width: 32px; height: 32px; font-size: 18px;"
              >
                <img
                  src="https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg"
                />
              </span>
            </div>
            <div
              class="ant-pro-checkcard-detail"
            >
              <div
                class="ant-pro-checkcard-header"
              >
                <div
                  class="ant-pro-checkcard-header-left"
                >
                  <div
                    class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                  >
                    OCR自定义
                  </div>
                </div>
              </div>
              <div
                class="ant-pro-checkcard-description"
              >
                这是一段关于该算法的说明
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-checkcard ant-pro-checkcard-bordered"
        >
          <div
            class="ant-pro-checkcard-content"
          >
            <div
              class="ant-pro-checkcard-avatar"
            >
              <span
                class="ant-avatar ant-avatar-square ant-avatar-image"
                style="width: 32px; height: 32px; font-size: 18px;"
              >
                <img
                  src="https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg"
                />
              </span>
            </div>
            <div
              class="ant-pro-checkcard-detail"
            >
              <div
                class="ant-pro-checkcard-header"
              >
                <div
                  class="ant-pro-checkcard-header-left"
                >
                  <div
                    class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                  >
                    OCR
                  </div>
                </div>
              </div>
              <div
                class="ant-pro-checkcard-description"
              >
                这是一段关于该算法的说明
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-checkcard ant-pro-checkcard-bordered"
        >
          <div
            class="ant-pro-checkcard-content"
          >
            <div
              class="ant-pro-checkcard-avatar"
            >
              <span
                class="ant-avatar ant-avatar-square ant-avatar-image"
                style="width: 32px; height: 32px; font-size: 18px;"
              >
                <img
                  src="https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg"
                />
              </span>
            </div>
            <div
              class="ant-pro-checkcard-detail"
            >
              <div
                class="ant-pro-checkcard-header"
              >
                <div
                  class="ant-pro-checkcard-header-left"
                >
                  <div
                    class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                  >
                    视频分类
                  </div>
                </div>
              </div>
              <div
                class="ant-pro-checkcard-description"
              >
                这是一段关于该算法的说明
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-checkcard ant-pro-checkcard-bordered"
        >
          <div
            class="ant-pro-checkcard-content"
          >
            <div
              class="ant-pro-checkcard-avatar"
            >
              <span
                class="ant-avatar ant-avatar-square ant-avatar-image"
                style="width: 32px; height: 32px; font-size: 18px;"
              >
                <img
                  src="https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg"
                />
              </span>
            </div>
            <div
              class="ant-pro-checkcard-detail"
            >
              <div
                class="ant-pro-checkcard-header"
              >
                <div
                  class="ant-pro-checkcard-header-left"
                >
                  <div
                    class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                  >
                    关键点检测
                  </div>
                </div>
              </div>
              <div
                class="ant-pro-checkcard-description"
              >
                这是一段关于该算法的说明
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        CheckCard.Group Options 列表渲染说明：
      </h4>
      <ul>
        <li>
          <strong>
            options
          </strong>
          : 数据源数组，每个元素会被渲染为一个 CheckCard
        </li>
        <li>
          <strong>
            dataSource
          </strong>
          : 包含多个选项数据的数组
        </li>
      </ul>
      <h4>
        Option 对象属性：
      </h4>
      <ul>
        <li>
          <strong>
            title
          </strong>
          : 卡片标题，显示文本
        </li>
        <li>
          <strong>
            avatar
          </strong>
          : 卡片头像，可以是 React 节点
        </li>
        <li>
          <strong>
            description
          </strong>
          : 卡片描述信息
        </li>
        <li>
          <strong>
            value
          </strong>
          : 选项值，用于标识和表单绑定
        </li>
      </ul>
      <h4>
        Avatar 组件 Props：
      </h4>
      <ul>
        <li>
          <strong>
            size
          </strong>
          : 头像尺寸，数字值（像素）
        </li>
        <li>
          <strong>
            shape
          </strong>
          : 头像形状，'square' 表示方形
        </li>
        <li>
          <strong>
            src
          </strong>
          : 头像图片地址
        </li>
      </ul>
      <h4>
        列表渲染特点：
      </h4>
      <ul>
        <li>
          <strong>
            自动布局
          </strong>
          : 根据容器宽度自动排列卡片
        </li>
        <li>
          <strong>
            响应式
          </strong>
          : 在不同屏幕尺寸下自动调整布局
        </li>
        <li>
          <strong>
            统一样式
          </strong>
          : 所有卡片使用相同的样式配置
        </li>
        <li>
          <strong>
            批量操作
          </strong>
          : 支持批量选择和操作
        </li>
      </ul>
      <h4>
        使用场景：
      </h4>
      <ul>
        <li>
          <strong>
            算法选择
          </strong>
          : 如示例中的机器学习算法选择
        </li>
        <li>
          <strong>
            产品展示
          </strong>
          : 展示多个产品选项
        </li>
        <li>
          <strong>
            功能选择
          </strong>
          : 选择不同的功能模块
        </li>
        <li>
          <strong>
            配置选择
          </strong>
          : 选择不同的配置选项
        </li>
      </ul>
      <h4>
        最佳实践：
      </h4>
      <ul>
        <li>
          <strong>
            数据结构
          </strong>
          : 保持数据结构的统一性和一致性
        </li>
        <li>
          <strong>
            性能优化
          </strong>
          : 大量数据时考虑虚拟滚动
        </li>
        <li>
          <strong>
            用户体验
          </strong>
          : 提供清晰的视觉层次和交互反馈
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>